<template>
  <div class="space_add">
    <div class="viewPort">
      <div class="longScroll">
        <v-fullpage ref="fullpage">
          <div slot="section">
            <el-card class="box-card" shadow="always">
              <div class="tips">
                <div class="run">
                  <div class="tipsDetail">向下滑动</div>
                  <div class="icon2" @click="nextPage">
                    <div>
                      <i class="el-icon-arrow-down"></i>
                    </div>
                    <div>
                      <i class="el-icon-arrow-down"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="leftItem">
                <img
                  src="../assets/image/space_add1.png"
                  style="display: block; width: 100%; height: 100%"
                />
              </div>
              <div class="rightItem">
                <div class="title">基本信息</div>
                <div class="title_details">请编辑你的停车位信息</div>
                <div class="form">
                  <el-form
                    ref="add1"
                    :model="add"
                    label-width="100px"
                    style="margin: 20px auto; width: 95%; text-align: left"
                  >
                    <el-form-item
                      prop="space_no"
                      label="停车位编号"
                      :rules="[
                        { required: true, message: '停车位编号不能为空' },
                        { type: 'number', message: '停车位编号必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="add.space_no"
                        style="margin-left: 50px; width: 65%"
                        autocomplete="off"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="space_private" label="私有停车位">
                      <el-switch
                        v-model="add.space_private"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="margin-left: 50px"
                      >
                      </el-switch>
                    </el-form-item>
                    <el-form-item prop="space_charge_type" label="充电停车位">
                      <el-switch
                        v-model="add.space_charge_type"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="margin-left: 50px"
                      >
                      </el-switch>
                    </el-form-item>
                    <el-form-item prop="remarks" label="备注">
                      <el-input
                        v-model.number="add.remarks"
                        type="textarea"
                        style="margin-left: 50px; width: 65%"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <el-button size="medium" @click="backEdit">返回</el-button>
                </div>
              </div>
            </el-card>
          </div>
          <div slot="section">
            <el-card class="box-card" shadow="always">
              <div class="tips">
                <div class="run">
                  <div class="icon" @click="prePage">
                    <div>
                      <i class="el-icon-arrow-up"></i>
                    </div>
                    <div>
                      <i class="el-icon-arrow-up"></i>
                    </div>
                  </div>
                  <div class="tipsDetail">向上滑动</div>
                </div>
              </div>
              <div class="leftItem">
                <img
                  src="../assets/image/car_details.png"
                  style="display: block; width: 100%; height: 100%"
                />
              </div>
              <div class="rightItem">
                <div class="title">区域信息</div>
                <div class="title_details">请编辑你的停车位区域信息</div>
                <div class="form">
                  <div style="margin-top: 20px">
                    <el-input
                      placeholder="请输入内容"
                      v-model="searchData"
                      clearable
                      style="width: 50%"
                      size="medium"
                    >
                    </el-input>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      style="margin-left: 10px"
                      size="medium"
                      >搜索</el-button
                    >
                    <div class="table">
                      <el-table
                        ref="singleTable"
                        :data="
                          regionData.slice((lazyPage - 1) * 5, lazyPage * 5)
                        "
                        highlight-current-row
                        @current-change="selectRow"
                        style="margin: 15px auto; width: 80%"
                        size="small"
                      >
                        <el-table-column
                          property="reg_id"
                          label="ID"
                          width="50"
                        >
                        </el-table-column>
                        <el-table-column
                          property="reg_name"
                          label="区域"
                          width="80"
                        >
                        </el-table-column>
                        <el-table-column
                          property="reg_type"
                          label="区域类型"
                          width="120"
                        >
                        </el-table-column>
                        <el-table-column
                          property="reg_space_count"
                          label="车位数量"
                        >
                        </el-table-column>
                        <el-table-column
                          property="reg_space_count"
                          label="剩余数量"
                        >
                        </el-table-column>
                      </el-table>
                      <el-pagination
                        small
                        layout="prev, pager, next"
                        :total="total"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                      >
                      </el-pagination>
                    </div>
                  </div>
                  <div style="margin-top: 10px">
                    <el-form
                      ref="add2"
                      :model="add"
                      label-width="100px"
                      style="margin: 20px auto; width: 95%; text-align: left"
                    >
                      <el-form-item
                        prop="region_id"
                        label="区域编号"
                        :rules="[
                          { required: true, message: '区域编号不能为空' },
                          { type: 'number', message: '区域编号必须为数字值' },
                        ]"
                      >
                        <el-input
                          v-model.number="add.region_id"
                          style="margin-left: 50px; width: 65%"
                          autocomplete="off"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="margin-top: 20px">
                    <el-button
                      type="primary"
                      size="medium"
                      @click="submit('edit')"
                      >提交<i class="el-icon-upload el-icon--right"></i
                    ></el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </v-fullpage>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Space_Add",
  data() {
    return {
      add: {
        space_no: null,
        space_private: null,
        space_charge_type: null,
        remarks: "",
        region_id: null,
      },
      searchData: "",
      regionData: [
        {
          reg_id: 1,
          org_id: null,
          company_name: "凉凉科技",
          reg_name: "南区",
          reg_type: "普通",
          reg_space_count: 20,
          reg_space_recount: 6,
          reg_remarks: null,
        },
      ],
      currentRow: null,
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
    };
  },
  created() {
    this.getRegionList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    //获取停车区域
    getRegionList() {
      this.axios
        .get("/region/regionList", {
          params: {
            page: 1,
            count: 15,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.regionData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取停车位区域列表失败");
        });
    },
    backEdit() {
      this.$router.go(-1);
    },
    prePage() {
      this.$refs.fullpage.pre();
    },
    nextPage() {
      this.$refs.fullpage.next();
    },
    submit() {
      let list = [];
      list.push(this.checkForm("add1"), this.checkForm("add2"));
      Promise.all(list)
        .then(() => {
          this.axios
            .post("/space/addSpace", this.add, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.backEdit();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("添加停车位信息失败");
            });
        })
        .catch(() => {
          this.$message({
            message: "请完整填写修改信息",
            type: "warning",
          });
          return false;
        });
    },
    checkForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resolve();
          } else reject();
        });
      });
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    //选中停车区域
    selectRow(val) {
      this.currentRow = val;
      const reginId = this.currentRow.reg_id;
      this.add.region_id = reginId;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/payingRecord/payingRecordList", val, 3, 15)
          .then((res) => {
            this.data = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取区域列表-第${val}页失败`);
          });
      }
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  list-style: none;
}
.space_add {
  width: 100%;
  height: 65vh;
  padding: 0 30px;
}
.viewPort {
  width: 100%;
  height: 77vh;
  overflow: hidden;
}

.longScroll {
  width: 100%;
  height: 79vh;
  overflow: scroll;
  z-index: 99;
}
.longScroll::-webkit-scrollbar {
  display: none;
}
.longScroll {
  position: relative;
}
.box-card {
  position: relative;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: 75vh;
}
.tips {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  width: 20px;
  height: 120px;
}
.run {
  position: relative;
}
.icon {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 15px;
  height: 30px;
  color: #409eff;
  animation: run linear 1.5s infinite;
}
.icon:hover {
  cursor: pointer;
}
.icon2 {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 15px;
  height: 30px;
  color: #409eff;
  animation: run2 linear 1.5s infinite;
}
.icon2:hover {
  cursor: pointer;
}
@keyframes run {
  0%,
  50% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, -20px);
  }
}
@keyframes run2 {
  0%,
  50% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, 20px);
  }
}
.tipsDetail {
  line-height: 2;
  color: #409eff;
}
.leftItem {
  float: left;
  width: 45%;
  height: 68vh;
}
.rightItem {
  float: right;
  width: 55%;
  height: 68vh;
}
.rightItem .title {
  text-align: left;
  color: #225cc2;
  font-size: 1.5rem;
}
.rightItem .title_details {
  text-align: left;
  color: #909399;
  font-size: 1.1rem;
}
.form >>> .el-form-item__error {
  margin-left: 50px;
}
.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
</style>